/* Some tricks to make things right */
html, body, svg {
	margin : 0px;
	padding: 0px;
	width  : 100%;
	height : 100%;
	overflow: hidden;
}

body	{
	-webkit-touch-callout: inherit;
	-webkit-user-select: inherit;
	-khtml-user-select: inherit;
	-moz-user-select: inherit;
	-ms-user-select: inherit;
	user-select: inherit;
}

svg.noUserSelect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* About SVG */
svg * {
	 vector-effect	: non-scaling-stroke;
	}
svg rect.tile.selected {
	stroke-width	: 5px;
	stroke-dasharray: 10, 2;
}
svg g.TileRoot.selected > g.bgPreso > rect.tile {
	stroke-width	: 5px;
}

svg g.TileRoot > g.bgPreso > text.title {
	stroke		: none;
	font-size	: 10px;
}

svg g.TileRoot > rect.fgRect {
	fill	: grey;
}

/* About tiles */
svg g.TileRoot > g.bgPreso > rect.tile {
	stroke-width : 2;
	fill: white;
	stroke: black;
}

svg g.TileRoot > g.bgPreso > rect.OutRect {
	stroke-width : 4;
	fill: none;
	stroke: black;
}

/* Brick with wich we can interact */
svg.edition g.Brick.TileRoot > g.bgPreso > rect.shadow,
svg g.TileRoot > g.bgPreso > rect.shadow {
	display	: none;
}

svg g.Brick.TileRoot > g.bgPreso > rect.shadow {
	display	: inherit;
}

/* Type of tiles */
svg g.TileRoot.BrickPlace  g.bgPreso > rect.tile {
	stroke	: lightgreen;
}

svg g.TileRoot.BrickDevice  g.bgPreso > rect.tile {
	stroke	: #FF5;
}

svg g.TileRoot.BrickService  g.bgPreso > rect.tile {
	stroke	: orange;
}

svg g.Univers  > .gImage  > circle.inBorder {
	stroke			: black;
	fill			: none;
	stroke-width	: 4px;
}

svg g.Univers  > .gImage  > circle.OutBorder {
	stroke			: black;
	fill			: none;
	stroke-width	: 6px;
}


/* Other things... */
svg g.Univers text		{stroke: none;}

.paletteRoot text			{fill: black; stroke: none;}
svg .AlxTab				{fill	: lightgrey; stroke:black;}

svg .AlxTab.BrickUser 	{fill	: lightblue; stroke:black;}
svg .BrickUser {stroke	: lightblue;}

svg .AlxTab.BrickDevice	{fill	: #FF5; stroke:black;}
svg .BrickDevice, svg g.Univers.BrickDevice  > .gImage  > circle.inBorder	{stroke	: #FF5;}

svg .AlxTab.BrickService	{fill	: #F3AF4A; stroke:black;}
svg .BrickService, svg g.Univers.BrickService > .gImage  > circle.inBorder		{stroke	: orange;}

svg .AlxTab.BrickPlace	{fill	: lightgreen; stroke:black;}
svg .BrickPlace, svg g.Univers.BrickPlace > .gImage  > circle.inBorder 			{stroke	: lightgreen;}

svg .AlxTab.BrickMixed	{fill	: grey; stroke:black;}
svg .BrickMixed	 		{stroke	: grey;}

svg text.svgText			{fill	: black;}
svg g.svgEntry > rect		{fill	: white;
						 stroke	: black;
						}
						
svg g.TileEdition rect.background {
	fill		: #CCC;
	stroke		: black;
	stroke-width: 4px;
}

/* Modal */
div.AlxModal {
	background	: black;
	opacity 	: 0.9;
	width		: 100%;
	height		: 100%;
	position	: absolute;
	top			: 0px;
	left		: 0px;
}

div.AlxModal input.name {
	position	: absolute;
	left		: 10%;
	top			: 25%;
	width		: 80%;
	font-size	: 32px;
}

div.AlxModal .OK {
	position	: absolute;
	bottom		: 45%;
	right		: 200px;
	width		: 80px;
	height		: 40px;
	background	: #7F7;
}

div.AlxModal .Cancel {
	position	: absolute;
	bottom		: 45%;
	right		: 100px;
	width		: 80px;
	height		: 40px;
	background	: #F77;
}
